.sql-editor-container {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sql-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  border-radius: 6px 6px 0 0;
}

.sql-editor-toolbar .ant-typography {
  margin: 0;
  font-weight: 500;
}

.sql-editor-content {
  position: relative;
}

.sql-editor-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  font-size: 16px;
  color: #666;
}

.sql-editor-error {
  padding: 20px;
  text-align: center;
  color: #ff4d4f;
}

/* 编辑器样式定制 */
.monaco-editor {
  border-radius: 0 0 6px 6px;
}

.monaco-editor .margin {
  background-color: transparent !important;
}

.monaco-editor .monaco-editor-background {
  background-color: transparent !important;
}

/* 深色主题定制 */
.sql-editor-dark .sql-editor-toolbar {
  background: #262626;
  border-bottom-color: #434343;
  color: #fff;
}

.sql-editor-dark .sql-editor-container {
  background: #1e1e1e;
}

/* 自动补全样式 */
.monaco-editor .suggest-widget {
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:hover {
  background-color: rgba(90, 156, 214, 0.1);
}

/* 行号样式 */
.monaco-editor .margin-view-overlays .line-numbers {
  color: #858585;
  font-size: 12px;
}

/* 滚动条样式 */
.monaco-editor .monaco-scrollable-element > .scrollbar > .slider {
  border-radius: 3px;
}

/* 选择高亮 */
.monaco-editor .selected-text {
  background-color: rgba(90, 156, 214, 0.3);
}

/* 错误提示样式 */
.monaco-editor .squiggly-error {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' enable-background='new 0 0 6 3' height='3' width='6'%3E%3Cg fill='%23ff5555'%3E%3Cpolygon points='5.5,0 2.5,3 1.1,3 4.1,0'/%3E%3Cpolygon points='4,0 6,2 6,0.6 5.4,0'/%3E%3Cpolygon points='0,2 1,3 2.4,3 0,0.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left;
}

.monaco-editor .squiggly-warning {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' enable-background='new 0 0 6 3' height='3' width='6'%3E%3Cg fill='%23ffa500'%3E%3Cpolygon points='5.5,0 2.5,3 1.1,3 4.1,0'/%3E%3Cpolygon points='4,0 6,2 6,0.6 5.4,0'/%3E%3Cpolygon points='0,2 1,3 2.4,3 0,0.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left;
}